/* eslint-disable */
import { Line, mixins } from 'vue-chartjs'
import moment from 'moment'

export default Line.extend({
    props: ['options', 'cdata', 'balance'],
    //mixins: [mixins.reactiveProp],
    mounted() {
        console.log(this.cdata);
        this.draw();
    },
    data() {
        return {
            labels: []
        }
    },
    watch: {
        cdata: function() {
            this.draw();
        },
        balance: function() {
            this.draw();
        }
    },
    methods: {
        draw: function() {
            this.renderChart({
                labels: this.generateChartLabels(this.cdata),
                datasets: [{
                    borderWidth: 2,
                    borderColor: '#63ACDD',
                    fill: true,
                    backgroundColor: '#CADFEE',
                    pointBorderWidth: 0,
                    pointBackgroundColor: '#63ACDD',
                    data: this.generateChartData(this.cdata)
                }]
            }, {
                legend: { display: false }
            })
        },
        generateChartData: function(raw) {
            var data = [];
            for (var i = 0; i < raw.length; i++) {
                var d = this.balance - parseInt(raw[i].CD);
                if (i > 0) {
                    d = data[i - 1] - parseInt(raw[i].CD);
                }
                data.push(d);
            }
            data.unshift(this.balance);
            return data.reverse();;
        },
        generateChartLabels: function(raw) {
            var data = [];
            for (var i = 0; i < raw.length; i++) {
                data.push(moment(raw[i].RBR).format('MM-DD'));
            }
            data.unshift(moment().format('MM-DD'));
            return data.reverse();
        },
    }
})